iT邦幫忙

2024 iThome 鐵人賽
DAY 22
0
自我挑戰組

asp.net可以變出那些功能系列 第 22 篇

CRUD修改:水費

16th鐵人賽
133 瀏覽

  • 分享至 

  • xImage
    •  

https://laihao2.com/Home/WaterEdit/A987654321
https://ithelp.ithome.com.tw/upload/images/20240929/20119035fqKpDmYze2.png

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

資料表設定好>再寫程式:加入資料庫>串聯資料庫>

參考前天的文章~

產生Models裡面類別檔dao>按:建置>

參考前天的文章~

Controllers裡面的Entities>

public ActionResult WaterEdit(string id)
        {
            var water = _db.WATER_BILL.FirstOrDefault(x => x.DOCUMENT_ID == id);
            WATER_BILL photo = _db.WATER_BILL.Find(id);
            if (photo == null)
            {
                return HttpNotFound();  // 找不到
            }
            return View(water);
        }
        // POST: Edit Water
        //[AllowAnonymous]
        [HttpPost]
        //public ActionResult WaterEdit(WATER_BILL water)
        // 上傳PDF 檔案
        public ActionResult WaterEdit(WATER_BILL water, HttpPostedFileBase pdfFile)
        {

            var model = _db.WATER_BILL.FirstOrDefault(x => x.DOCUMENT_ID == water.DOCUMENT_ID);
            //20250325水費要顯示 PDF 檔案

            if (pdfFile != null && pdfFile.ContentLength > 0)
            {

                model.PDF_CONTENT = new byte[pdfFile.ContentLength];
                pdfFile.InputStream.Read(model.PDF_CONTENT, 0, pdfFile.ContentLength);
            }
            if (model == null)
            {   // 找不到這一筆記錄
                return HttpNotFound();
            }
            else
            {
                model.FACTORY = water.FACTORY;
                model.WATER_SIGNAL = water.WATER_SIGNAL;
                model.FROM_BILLING_PERIOD = water.FROM_BILLING_PERIOD;
                model.UNTIL_BILLING_PERIOD = water.UNTIL_BILLING_PERIOD;
                model.TYPE = water.TYPE;
                model.METER_NUMBER = water.METER_NUMBER;
                model.METER_DIAMETER = water.METER_DIAMETER;
                model.NUMBER_POINTERS = water.NUMBER_POINTERS;
                model.TOTAL_WATER = water.TOTAL_WATER;
                model.TOTAL_BILL_TAX = water.TOTAL_BILL_TAX;
                model.CARBON_PERIOD = water.CARBON_PERIOD;
                model.CARBON_EMISSION_FACTOR = water.CARBON_EMISSION_FACTOR;
                model.CARBON_DIOXIDE = water.CARBON_DIOXIDE;
                model.VOUCHER_NUMBER = water.VOUCHER_NUMBER;
            }


            _db.SaveChanges();

            return RedirectToAction("WaterList");
        }

        //20250325水費要顯示 PDF 檔案

        //[AllowAnonymous]
        [HttpGet]
        public FileContentResult GetPdfFile(string id)
        {
            var waterBill = _db.WATER_BILL.FirstOrDefault(x => x.DOCUMENT_ID == id);
            if (waterBill != null && waterBill.PDF_CONTENT != null && waterBill.PDF_CONTENT.Length > 0)
            {
                return File(waterBill.PDF_CONTENT, "application/pdf");
            }
            return null;
        }

解釋程式碼

這段代碼是用於編輯和顯示水費賬單（包括上傳和下載 PDF 文件）的功能。下面是對代碼的詳細解釋：

1. WaterEdit(string id) (GET)

這是一個用於編輯頁面的控制器方法，用來根據提供的 id 獲取特定水費賬單的信息。

  • 首先使用 DOCUMENT_ID 查找賬單數據： 
    var water = _db.WATER_BILL.FirstOrDefault(x => x.DOCUMENT_ID == id);
    FirstOrDefault 會查找第一個符合條件的記錄，若找不到則返回 null。
  • 查找賬單中的文件： 
    WATER_BILL photo = _db.WATER_BILL.Find(id);
    用 Find(id) 查找與 id 對應的水費賬單數據。
  • 如果賬單不存在，返回 HttpNotFound() 表示找不到該記錄。
  • 如果找到賬單，則返回編輯視圖，並將數據傳遞給前端。

2. WaterEdit(WATER_BILL water, HttpPostedFileBase pdfFile) (POST)

這是一個用於提交編輯表單的控制器方法，包含文件上傳邏輯。

  • 使用 water.DOCUMENT_ID 查找數據庫中的對應記錄： 
    var model = _db.WATER_BILL.FirstOrDefault(x => x.DOCUMENT_ID == water.DOCUMENT_ID);
  • 如果上傳了 PDF 文件，並且文件大小大於 0，則將文件保存為字節數組： 
    if (pdfFile != null && pdfFile.ContentLength > 0)
{
    model.PDF_CONTENT = new byte[pdfFile.ContentLength];
    pdfFile.InputStream.Read(model.PDF_CONTENT, 0, pdfFile.ContentLength);
}
    通過 pdfFile.InputStream.Read() 將 PDF 文件讀入到字節數組 model.PDF_CONTENT 中。
  • 如果沒有找到對應的水費賬單記錄，返回 HttpNotFound()。
  • 否則更新賬單的其他字段： 
    model.FACTORY = water.FACTORY;
model.WATER_SIGNAL = water.WATER_SIGNAL;
model.FROM_BILLING_PERIOD = water.FROM_BILLING_PERIOD;
// 其他字段...
    這里包括工廠、賬單周期、儀表信息等字段。
  • 調用 _db.SaveChanges() 將所有修改保存到數據庫。
  • 最後重定向到水費賬單列表頁面。

3. GetPdfFile(string id) (GET)

這個方法用於獲取存儲在數據庫中的 PDF 文件。

  • 通過 DOCUMENT_ID 查找水費賬單： 
    var waterBill = _db.WATER_BILL.FirstOrDefault(x => x.DOCUMENT_ID == id);
  • 如果賬單存在並且包含 PDF 文件內容，則返回 PDF 文件： 
    return File(waterBill.PDF_CONTENT, "application/pdf");
    這會將 PDF 文件作為 application/pdf 格式返回給瀏覽器，使用戶可以下載或查看文件。
  • 如果沒有找到 PDF 文件，返回 null。

總結

這段代碼的核心功能是編輯水費賬單信息，上傳和保存 PDF 文件，以及通過 ID 下載 PDF 文件。

產生畫面View程式碼

@*@model IEnumerable<WebApplication5.Models.WATER_BILL>*@

@model WebApplication5.Models.WATER_BILL
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "WaterEdit";
}

<style>
    .align-right {
        text-align: right;
    }

    .nowrap {
        white-space: nowrap;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        // 當FACTORY字段的值更改時
        $("#FACTORY").change(function () {
            // 獲取所選的FACTORY值
            var FACTORY = $(this).val();

            // 根據FACTORY的值設置相應的ELECTRICITY_SIGNAL選項
            if (FACTORY === "永科廠") {
                $("#WATER_SIGNAL").val("23-45678901-2");
                $("#METER_NUMBER").val("123D456780");
                $("#METER_DIAMETER").val("75");
            } else if (FACTORY === "永康廠") {
                $("#WATER_SIGNAL").val("12-34567890-1");
                $("#METER_NUMBER").val("123D456789");
                $("#METER_DIAMETER").val("40");
            }
            @*else if (FACTORY === "樹谷二期") {
                $("#WATER_SIGNAL").val("63-43233503-8");
                $("#METER_NUMBER").val("103G000227");
                $("#METER_DIAMETER").val("100");
            }*@
        });
    });
</script>

<script>
    $(document).ready(function () {

        // 為數字輸入框添加格式化事件
        $(".numeric-input").on("input", function () {
            formatNumberInput($(this));
        });


        // 提交表單時移除千位分隔符
        $("form").submit(function () {
            $(".numeric-input").each(function () {
                $(this).val($(this).val().replace(/,/g, ''));
            });
        });
    });

    // 格式化數字輸入框的值
    /*function formatNumberInput(input) {
        var val = input.val().replace(/,/g, ''); // 移除現有的千位分隔符
        if (val != '') {
            val = parseInt(val); // 確保輸入是一個數值
            input.val(val.toLocaleString()); // 使用toLocaleString()添加千位分隔符
        }
    }*/
    // 格式化數字輸入框的值
    function formatNumberInput(input) {
        var val = input.val().replace(/,/g, ''); // 移除現有的千位分隔符
        if (val != '') {
            var parts = val.split('.'); // 將輸入值拆分為整數部分和小數部分
            parts[0] = parseInt(parts[0]).toLocaleString(); // 格式化整數部分
            input.val(parts.join('.')); // 重新組合並設置輸入框的值
        }
    }

</script>


@if (ViewBag.Msg != null)
{
    <div class="alert alert-danger">@ViewBag.Msg</div>
}
<body>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")


    @*20240325增加上傳檔案 *@

    @*@using (Html.BeginForm()) *@
    @using (Html.BeginForm("WaterEdit", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()

        <div class="form-inline">
            <h3 style="margin-top: 50px;">水電帳單:修改</h3>
            <h4>單據號碼:無法修改</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.DOCUMENT_ID)
            <div class="form-group">
                @Html.LabelFor(model => model.DOCUMENT_ID, htmlAttributes: new { @class = "control-label" })

                @*不能修改*@
                @Html.EditorFor(model => model.DOCUMENT_ID, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
                @Html.ValidationMessageFor(model => model.DOCUMENT_ID, "", new { @class = "text-danger" })

            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.FACTORY, htmlAttributes: new { @class = "control-label" })


                @{
                    var listItemsFACTORY = new List<SelectListItem>
{
                   new SelectListItem { Text = "永康廠", Value = "永康廠", Selected = true },
            @*new SelectListItem { Text = "樹谷一期", Value = "樹谷一期", Selected = true },*@
                    new SelectListItem { Text = "永科廠", Value = "永科廠" }
                };
                }
                @Html.DropDownList("FACTORY", listItemsFACTORY, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.FACTORY, "", new { @class = "text-danger" })

            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.WATER_SIGNAL, htmlAttributes: new { @class = "control-label" })

                @Html.EditorFor(model => model.WATER_SIGNAL, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
                @Html.ValidationMessageFor(model => model.WATER_SIGNAL, "", new { @class = "text-danger" })

            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.FROM_BILLING_PERIOD, htmlAttributes: new { @class = "control-label" })
                @Html.TextBoxFor(model => model.FROM_BILLING_PERIOD, "{0:yyyy-MM-dd}", new { @class = "form-control" })
                @*@Html.EditorFor(model => model.FROM_BILLING_PERIOD, new { htmlAttributes = new { @class = "form-control" } })*@
                @Html.ValidationMessageFor(model => model.FROM_BILLING_PERIOD, "", new { @class = "text-danger" })

            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.UNTIL_BILLING_PERIOD, htmlAttributes: new { @class = "control-label" })
                @Html.TextBoxFor(model => model.UNTIL_BILLING_PERIOD, "{0:yyyy-MM-dd}", new { @class = "form-control" })
                @*@Html.EditorFor(model => model.UNTIL_BILLING_PERIOD, new { htmlAttributes = new { @class = "form-control" } })*@
                @Html.ValidationMessageFor(model => model.UNTIL_BILLING_PERIOD, "", new { @class = "text-danger" })

            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.TYPE, htmlAttributes: new { @class = "control-label" })

                @{
                    var listItemsTYPE = new List<SelectListItem>
{
                    new SelectListItem { Text = "普通", Value = "普通", Selected = true },
                    new SelectListItem { Text = "工業", Value = "工業" }
                };
                }
                @Html.DropDownList("TYPE", listItemsTYPE, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.TYPE, "", new { @class = "text-danger" })

            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.METER_NUMBER, htmlAttributes: new { @class = "control-label" })


                @Html.EditorFor(model => model.METER_NUMBER, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
                @Html.ValidationMessageFor(model => model.METER_NUMBER, "", new { @class = "text-danger" })
            </div>



            <div class="form-group">
                @Html.LabelFor(model => model.METER_DIAMETER, htmlAttributes: new { @class = "control-label" })


                @Html.EditorFor(model => model.METER_DIAMETER, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
                @Html.ValidationMessageFor(model => model.METER_DIAMETER, "", new { @class = "text-danger" })
            </div>

            @*<div class="form-group">
                    @Html.LabelFor(model => model.NUMBER_POINTERS, htmlAttributes: new { @class = "control-label" })

                    @Html.EditorFor(model => model.NUMBER_POINTERS, new { htmlAttributes = new { @class = "form-control  align-right" } })
                    @Html.ValidationMessageFor(model => model.NUMBER_POINTERS, "", new { @class = "text-danger" })

                </div>*@

            @*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
            <div class="form-group">
                @Html.LabelFor(model => model.NUMBER_POINTERS, htmlAttributes: new { @class = "control-label" })
                @Html.EditorFor(model => model.NUMBER_POINTERS, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
                @Html.ValidationMessageFor(model => model.NUMBER_POINTERS, "", new { @class = "text-danger" })
            </div>

            @*<div class="form-group">
                    @Html.LabelFor(model => model.TOTAL_WATER, htmlAttributes: new { @class = "control-label" })

                    @Html.EditorFor(model => model.TOTAL_WATER, new { htmlAttributes = new { @class = "form-control  align-right" } })
                    @Html.ValidationMessageFor(model => model.TOTAL_WATER, "", new { @class = "text-danger" })

                </div>*@

            @*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
            <div class="form-group">
                @Html.LabelFor(model => model.TOTAL_WATER, htmlAttributes: new { @class = "control-label" })
                @Html.EditorFor(model => model.TOTAL_WATER, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
                @Html.ValidationMessageFor(model => model.TOTAL_WATER, "", new { @class = "text-danger" })
            </div>

            @*<div class="form-group">
                    @Html.LabelFor(model => model.TOTAL_BILL_TAX, htmlAttributes: new { @class = "control-label" })

                    @Html.EditorFor(model => model.TOTAL_BILL_TAX, new { htmlAttributes = new { @class = "form-control  align-right" } })
                    @Html.ValidationMessageFor(model => model.TOTAL_BILL_TAX, "", new { @class = "text-danger" })

                </div>*@

            @*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
            <div class="form-group">
                @Html.LabelFor(model => model.TOTAL_BILL_TAX, htmlAttributes: new { @class = "control-label" })
                @Html.EditorFor(model => model.TOTAL_BILL_TAX, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
                @Html.ValidationMessageFor(model => model.TOTAL_BILL_TAX, "", new { @class = "text-danger" })
            </div>

            @*<div class="form-group">
                    @Html.LabelFor(model => model.CARBON_PERIOD, htmlAttributes: new { @class = "control-label" })

                    @Html.EditorFor(model => model.CARBON_PERIOD, new { htmlAttributes = new { @class = "form-control  align-right" } })
                    @Html.ValidationMessageFor(model => model.CARBON_PERIOD, "", new { @class = "text-danger" })

                </div>*@

            @*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
            <div class="form-group">
                @Html.LabelFor(model => model.CARBON_PERIOD, htmlAttributes: new { @class = "control-label" })
                @Html.EditorFor(model => model.CARBON_PERIOD, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
                @Html.ValidationMessageFor(model => model.CARBON_PERIOD, "", new { @class = "text-danger" })
            </div>



            @*<div class="form-group">
                    @Html.LabelFor(model => model.CARBON_EMISSION_FACTOR, htmlAttributes: new { @class = "control-label" })

                    @Html.EditorFor(model => model.CARBON_EMISSION_FACTOR, new { htmlAttributes = new { @class = "form-control  align-right" } })
                    @Html.ValidationMessageFor(model => model.CARBON_EMISSION_FACTOR, "", new { @class = "text-danger" })

                </div>*@

            @*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
            <div class="form-group">
                @Html.LabelFor(model => model.CARBON_EMISSION_FACTOR, htmlAttributes: new { @class = "control-label" })
                @Html.EditorFor(model => model.CARBON_EMISSION_FACTOR, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
                @Html.ValidationMessageFor(model => model.CARBON_EMISSION_FACTOR, "", new { @class = "text-danger" })
            </div>

            @*<div class="form-group">
                    @Html.LabelFor(model => model.CARBON_DIOXIDE, htmlAttributes: new { @class = "control-label" })

                    @Html.EditorFor(model => model.CARBON_DIOXIDE, new { htmlAttributes = new { @class = "form-control  align-right" } })
                    @Html.ValidationMessageFor(model => model.CARBON_DIOXIDE, "", new { @class = "text-danger" })

                </div>*@

            @*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
            <div class="form-group">
                @Html.LabelFor(model => model.CARBON_DIOXIDE, htmlAttributes: new { @class = "control-label" })
                @Html.EditorFor(model => model.CARBON_DIOXIDE, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
                @Html.ValidationMessageFor(model => model.CARBON_DIOXIDE, "", new { @class = "text-danger" })
            </div>

            <!-- **** 20240327加入輸入傳票號碼**** -->
            <div class="form-group">
                @Html.LabelFor(model => model.VOUCHER_NUMBER, htmlAttributes: new { @class = "control-label" })

                @Html.EditorFor(model => model.VOUCHER_NUMBER, new { htmlAttributes = new { @class = "form-control  align-right" } })
                @Html.ValidationMessageFor(model => model.VOUCHER_NUMBER, "", new { @class = "text-danger" })

            </div>

            <!--  這一段程式，從「Create檢視畫面」取得。-->
            <div class="form-group">
                @Html.LabelFor(model => model.PDF_CONTENT):
                <div class="col-md-10">
                    <!-- **** 檔案上傳 **** -->
                    <input class="pic-upload-input" type="file" name="pdfFile">
                    <!-- **** 檔案上傳 **** -->
                </div>
            </div>



            @*<div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="存檔" class="btn btn-danger" />
                    </div>
                </div>*@

            <!-- 添加一個空div來留出空白 -->
            <div style="height: 50px;"></div>

            <div class="text-center">
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="存檔" class="btn btn-danger" />
                    </div>
                </div>
            </div>


            @*20240327增加上傳檔案 *@
            @*@Html.ActionLink("檢視已存檔 PDF 檔案", "GetPdfFile", new { id = Model.DOCUMENT_ID }, new { target = "_blank" })*@
            @if (Model.PDF_CONTENT != null && Model.PDF_CONTENT.Length > 0)
            {
                <div>
                    <h4>已存檔PDF 文件內容:</h4>
                    <object data="@Url.Action("GetPdfFile", new { id = Model.DOCUMENT_ID })" type="application/pdf" width="100%" height="600px"></object>
                </div>
            }
            @*@Html.ActionLink("檢視 PDF 檔案", "GetPdfFile", new { id = Model.DOCUMENT_ID }, new { target = "_blank" })*@

        </div>
    }

    @*<div>
            @Html.ActionLink("Back to List", "Index")
        </div>*@
</body>
</html>

解釋程式碼
這是一個ASP.NET MVC視圖文件，目的是創建或編輯水電賬單的頁面（WaterEdit）。該頁面使用了Razor語法和HTML Helpers，並通過jQuery和JavaScript實現了前端交互。以下是對代碼的詳細解釋：

1. Model聲明與布局設置

@model WebApplication5.Models.WATER_BILL
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
  • @model聲明了當前視圖使用的模型類型為WATER_BILL，來自WebApplication5.Models命名空間。該模型表示水電賬單的信息。
  • Layout設置了頁面的布局文件，_Layout.cshtml是共享的布局文件。

2. 頁面標題和樣式

ViewBag.Title = "WaterEdit";
<style>
    .align-right { text-align: right; }
    .nowrap { white-space: nowrap; }
</style>
  • ViewBag.Title設定頁面的標題為“WaterEdit”。
  • 定義了兩個CSS類，.align-right用於右對齊文本，.nowrap用於保持文本在同一行。

3. jQuery和JavaScript交互

  • 根據工廠選擇設置其他字段：

    $(document).ready(function () {
    $("#FACTORY").change(function () {
        var FACTORY = $(this).val();
        if (FACTORY === "永科廠") {
            $("#WATER_SIGNAL").val("23-45678901-2");
            $("#METER_NUMBER").val("123D456780");
            $("#METER_DIAMETER").val("75");
        } else if (FACTORY === "永康廠") {
            $("#WATER_SIGNAL").val("12-34567890-1");
            $("#METER_NUMBER").val("123D456789");
            $("#METER_DIAMETER").val("40");
        }
    });
});

    當用戶選擇不同的工廠（FACTORY）時，會自動為WATER_SIGNAL、METER_NUMBER和METER_DIAMETER字段填充相應的值。

  • 格式化數字輸入：

    $(document).ready(function () {
    $(".numeric-input").on("input", function () {
        formatNumberInput($(this));
    });

    $("form").submit(function () {
        $(".numeric-input").each(function () {
            $(this).val($(this).val().replace(/,/g, ''));
        });
    });
});

function formatNumberInput(input) {
    var val = input.val().replace(/,/g, '');
    if (val != '') {
        var parts = val.split('.');
        parts[0] = parseInt(parts[0]).toLocaleString();
        input.val(parts.join('.'));
    }
}
    • 該代碼確保當用戶輸入數值時，會自動為數值添加千位分隔符（如1,000），並在表單提交時去掉分隔符。

4. 表單元素

表單使用了ASP.NET MVC的HTML Helper生成，處理賬單的各個字段。

  • FACTORY字段：

    @Html.DropDownList("FACTORY", listItemsFACTORY, new { @class = "form-control" })

    一個下拉列表用於選擇工廠，包含“永康廠”和“永科廠”選項。

  • WATER_SIGNAL字段（只讀）：

    @Html.EditorFor(model => model.WATER_SIGNAL, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })

    顯示水號，使用readonly屬性禁止用戶編輯。

  • NUMBER_POINTERS、TOTAL_WATER、TOTAL_BILL_TAX等字段：

    @Html.EditorFor(model => model.NUMBER_POINTERS, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })

    這些字段都是數值輸入框，帶有千位分隔符，並且右對齊。

  • PDF文件上傳：

    <input class="pic-upload-input" type="file" name="pdfFile">

    提供文件上傳功能，允許用戶上傳賬單相關的PDF文件。

  • 顯示已存檔PDF：

    @if (Model.PDF_CONTENT != null && Model.PDF_CONTENT.Length > 0)
{
    <div>
        <h4>已存檔PDF 文件內容:</h4>
        <object data="@Url.Action("GetPdfFile", new { id = Model.DOCUMENT_ID })" type="application/pdf" width="100%" height="600px"></object>
    </div>
}

    如果數據庫中已存在PDF文件，會在頁面中顯示該文件的內容。

5. 驗證和提交

  • 表單使用了Html.BeginForm生成，設置了multipart/form-data以支持文件上傳。
  • 使用了Html.ValidationMessageFor方法，顯示字段的驗證錯誤信息。

這個頁面集成了後端數據模型、水電賬單相關字段的編輯功能、文件上傳、前端交互和表單驗證等功能，是一個典型的MVC視圖。

大家明天見~/images/emoticon/emoticon01.gif


上一篇
CRUD新增:水費
下一篇
網頁裡面還可以顯示網頁:員工交通
系列文
asp.net可以變出那些功能 共 30 篇
  1. 26
    現在很流行的VUE
  2. 27
    簡約風
  3. 28
    簡約風首頁看留言的地方
  4. 29
    實用日語加入資料庫寫法:新增
  5. 30
    加上資料表後的: 實用日語 列表
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22201 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙